<template>
  <div class="stat-card" :class="`stat-card-${type}`">
    <div class="card-header">
      <h4 class="card-title">{{ title }}</h4>
      <!-- 支持直接显示emoji字符串或Vant图标 -->
      <div v-if="isEmoji(icon)" class="emoji-icon" :style="{ fontSize: (iconSize || 20) + 'px' }">
        {{ icon }}
      </div>
      <van-icon v-else :name="icon" :size="iconSize || 20" />
    </div>
    
    <div class="card-content">
      <div class="stat-value" :class="{ 'stat-value-large': large }">
        {{ value }}
        <span v-if="unit" class="stat-unit">{{ unit }}</span>
      </div>
      
      <div v-if="change !== undefined" class="stat-change" :class="{ positive: change > 0, negative: change < 0 }">
        <van-icon :name="change > 0 ? 'arrow-up' : 'arrow-down'" size="12" />
        <span>{{ Math.abs(change) }}%</span>
      </div>
      
      <div v-if="description" class="stat-description">
        {{ description }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { Icon } from 'vant';

// 判断是否为emoji字符串
const isEmoji = (str) => {
  // 简单判断：长度较短且包含emoji特征字符
  return str && str.length < 5 && /[\u{1F300}-\u{1F6FF}\u{1F900}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}]/gu.test(str);
}

// 定义props
const props = defineProps({
  // 卡片标题
  title: {
    type: String,
    required: true
  },
  
  // 统计数值
  value: {
    type: [String, Number],
    required: true
  },
  
  // 数值单位
  unit: {
    type: String,
    default: ''
  },
  
  // 变化百分比
  change: {
    type: Number,
    default: undefined
  },
  
  // 描述文本
  description: {
    type: String,
    default: ''
  },
  
  // 图标名称
  icon: {
    type: String,
    default: 'line-chart'
  },
  
  // 图标大小
  iconSize: {
    type: Number,
    default: 20
  },
  
  // 卡片类型
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'success', 'warning', 'danger'].includes(value)
  },
  
  // 是否使用大尺寸样式
  large: {
    type: Boolean,
    default: false
  }
});
</script>

<style scoped>
.stat-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Emoji图标样式 */
.emoji-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.card-title {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  margin: 0;
}

.card-content {
  position: relative;
  z-index: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
  margin-bottom: 8px;
}

.stat-value-large {
  font-size: 36px;
}

.stat-unit {
  font-size: 16px;
  font-weight: 500;
  color: #666;
  margin-left: 4px;
}

.stat-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  margin-bottom: 8px;
}

.stat-change.positive {
  background-color: #f0f9ff;
  color: #409eff;
}

.stat-change.negative {
  background-color: #fff2f0;
  color: #ff6b6b;
}

.stat-description {
  font-size: 12px;
  color: #999;
  line-height: 1.4;
}

/* 不同类型的卡片样式 */
.stat-card-primary .stat-value {
  color: #409eff;
}

.stat-card-primary .card-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  background-color: rgba(64, 158, 255, 0.05);
  border-radius: 50%;
  transform: translate(30%, -30%);
  z-index: 0;
}

.stat-card-success .stat-value {
  color: #67c23a;
}

.stat-card-success .card-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background-color: rgba(103, 194, 58, 0.05);
  border-radius: 50%;
  transform: translate(40%, -40%);
  z-index: 0;
}

.stat-card-warning .stat-value {
  color: #e6a23c;
}

.stat-card-warning .card-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background-color: rgba(230, 162, 60, 0.05);
  border-radius: 50%;
  transform: translate(40%, -40%);
  z-index: 0;
}

.stat-card-danger .stat-value {
  color: #f56c6c;
}

.stat-card-danger .card-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background-color: rgba(245, 108, 108, 0.05);
  border-radius: 50%;
  transform: translate(40%, -40%);
  z-index: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stat-card {
    padding: 16px;
  }
  
  .stat-value {
    font-size: 24px;
  }
  
  .stat-value-large {
    font-size: 32px;
  }
}

@media (max-width: 480px) {
  .stat-card {
    padding: 14px;
  }
  
  .stat-value {
    font-size: 20px;
  }
  
  .stat-value-large {
    font-size: 28px;
  }
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  .stat-card {
    background-color: #1e1e1e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  
  .card-title {
    color: #b0b0b0;
  }
  
  .stat-value {
    color: #f0f0f0;
  }
  
  .stat-unit {
    color: #b0b0b0;
  }
  
  .stat-description {
    color: #707070;
  }
  
  .stat-change.positive {
    background-color: rgba(64, 158, 255, 0.1);
  }
  
  .stat-change.negative {
    background-color: rgba(245, 108, 108, 0.1);
  }
  
  .stat-card-primary .card-header::before {
    background-color: rgba(64, 158, 255, 0.03);
  }
  
  .stat-card-success .card-header::before {
    background-color: rgba(103, 194, 58, 0.03);
  }
  
  .stat-card-warning .card-header::before {
    background-color: rgba(230, 162, 60, 0.03);
  }
  
  .stat-card-danger .card-header::before {
    background-color: rgba(245, 108, 108, 0.03);
  }
}
</style>